<template>
  <div class="container-body">
    <section class="title-container">
        企业收发货地址
    </section>
    <div>
        
    <el-button style="margin-left: 0.5%;" size="mini" type="primary" @click="add">新增地址</el-button>
        <section class="right-but" style="margin-bottom:20px">
          <el-button type="text" style=""  @click="getList">
            <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png" >
          </el-button>
        </section>
      </div>
      
    <section class="list">
      <section class="add-item"  v-for="(item, index) in areaList" :key="index">
        <section class="title-item">
        	<span>【{{item.agency|noValue}}】</span>
        	<span>{{item.addressName|noValue}}</span>
        </section>
        <section class="icon-item" v-if="item.isDefault==1">默认</section>
        <section class="container-item">
          {{item.detailAddress}}
        </section>
        <section class="but-container">
          <section style="margin-right:20px;cursor:pointer;" @click="edit(item.id)">详细位置</section>
          <section style="margin-right:20px;cursor:pointer;" @click="edit(item.id)">修改</section>
          <section style="cursor:pointer;" @click="del(item.id)">删除</section>
        </section>
      </section>
    </section>

   <EnterproseAreaForm ref="areaForm" @refreshDataList="getList()"></EnterproseAreaForm>
  </div>
</template>

<script>
import {getEnterpriseList} from '@/api/area.js'
import {deleteAddress} from '@/api/market/crm.js';
import EnterproseAreaForm from './EnterproseAreaForm'
export default {
  data () {
    return {
      areaList: [],
      value: true,
      tips: '努力加载中...',
      count: 10,
      loading: false
    }
  },
  components: {
    EnterproseAreaForm
  },
  methods: {
// 获取企业地区数据
    getList () {
      getEnterpriseList().then(res => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            this.areaList = res.data.page.list
          }
        }
      })
    },
    del (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        console.log(id);
        deleteAddress({id: id}).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
            this.$emit('refreshDataList')
          }
        })
      })
    },
    add () {
      this.$refs.areaForm.init('add')
    },
    edit (id) {
      this.$refs.areaForm.init('edit',null,id)
    }

  },
  mounted () {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
.container-body {
    // margin: 0 auto;
  .title-container{
    font-size: $title-font-size;
    font-weight: 400;
    color: #666666;
    padding-bottom: 20px;

  }
  .list {
    display: flex;
    width: 100%;
    flex-direction: row;/*设置子元素的排列方向*/
    flex-wrap: wrap;/*溢出则换行*/

  }
  .add-item {
    margin-left: 0.5%;
    margin-right: 0.5%;
    width: 19%;
    min-width: 210px;
    margin-bottom: 10px;
    height: 150px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.05);
    border-radius: 6px;
    position: relative;
    .title-item{
      padding-left: 10px;
      padding-right: 10px;
      font-size: $title-font-size;
      font-weight: 400;
      color: #333333;
      margin-top: 10px;
    }
    .icon-item{
      background-color: rgb(245, 154, 35);
      padding: 2px 10px;
      color: #fff;
      font-size: 12px;
      position: absolute;
      right: 10px;
      top: 10px;
      border-radius: 3px;
    }
    .container-item{

      margin: 2% 0;
      padding-left: 10px;
      padding-right: 10px;
      font-size: $container-font-size;
      font-weight: 400;
      color: #999999;
    }
    .but-container{
      font-size: $title-font-size;

      font-weight: 400;
      color: #666666;
      display: flex;
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

  }
  .list1 {
    width: 300px;
    height: 150px;
  }
}
::v-deep .el-dialog__footer {
    margin-top: -20px !important;
    padding: 0px 20px 15px !important;
    margin-bottom: 16px;
}
::v-deep .el-checkbox {
    top: -10px;
}
</style>
